/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-07-15 13:14:51
 * @filename : src/common/state.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

class State extends Component {

    constructor(props) {
        super(props);
        this.state = {
           state : this.props.state,
           country : this.props.country,
        }
    }

    onStateChange(data) {
        this.setState({state:data});
        this.props.callbackParent(data);
    }

    createItems(value,label) {
          let item;
          if (this.state.state == value) {
              item = (
                      <TouchableOpacity style={styles.itemView} activeOpacity={1} key={value} onPress={()=>this.onStateChange(value)}>
                        <Text numberOfLines={1} style={[styles.itemText,styles.itemTextAction]}>{label}</Text>
                        <Icon name="ios-checkmark" style={styles.itemTextAction} size={40}/> 
                      </TouchableOpacity>
              );
          } else {
              item = (
                       <TouchableOpacity style={styles.itemView} activeOpacity={1} key={value} onPress={()=>this.onStateChange(value)}>
                          <Text numberOfLines={1} style={styles.itemText}>{label}</Text>
                       </TouchableOpacity>
              );
          } 
          return item; 
    }

    makeCountryItems() {
        let items = [],dataObj = JSON.parse(Store.local_state_list);
          let data = dataObj[this.state.country];
        if (this.props.extraItem) {
            data.unshift({ value: '', label: 'All States'});
        }
        for (var i in data) {
            let value = data[i].value,
                  label = data[i].label;
            items[i] = this.createItems(value,label);
        }
        return items;
    }

    render() {
        let items = this.makeCountryItems();
        return (
            <ScrollView>
            {items}
            </ScrollView>
        );
    }
}


const styles = StyleSheet.create(Css.CountryStyle);

export default State;